<div class="course-evaluate-container w100 h100">
  <div class="content-box" *ngIf="!view">
    <div class="tab-list flex flex-justify-start flex-align-center">
      <div [ngClass]="['list-item', searchParams.state === item.value ? 'active' : '']"
           (click)="changeTab(item)"
           *ngFor="let item of tabList;">
        {{item.text}}
      </div>
    </div>
    <div class="table-top-search">
      <div class="top-search-left">
        <label>
          学年:
          <nz-select [(ngModel)]="searchParams.schoolYear" nzPlaceHolder="请选择">
            <nz-option *ngFor="let item of yearList" [nzLabel]="item.schoolYear" [nzValue]="item.schoolYear"></nz-option>
          </nz-select>
        </label>
        <label>
          学期:
          <nz-select [(ngModel)]="searchParams.semester" nzPlaceHolder="请选择">
            <nz-option *ngFor="let item of semesterList" [nzLabel]="item.semesterName" [nzValue]="item.semester"></nz-option>
          </nz-select>
        </label>
        <label>
          课程编号：
          <input nz-input type="text" [(ngModel)]="searchParams.number" placeholder="请输入">
        </label>
        <label>
          课程名称：
          <input nz-input type="text" [(ngModel)]="searchParams.name" placeholder="请输入">
        </label>
        <label>
          任课教师：
          <input nz-input type="text" [(ngModel)]="searchParams.teacher" placeholder="请输入">
        </label>
      </div>
      <div class="top-search-right">
        <div class="table-top-btn">
          <button nz-button nzType="primary" (click)="clickSearch()">查询</button>
          <button nz-button nzType="default" (click)="resetSearch()">重置</button>
        </div>
      </div>
    </div>
    <div class="table-box">
      <ng-template #totalTemplate let-total>总共 {{ pageInfo.totalRecords? pageInfo.totalRecords:0 }} 条</ng-template>
      <nz-table
        nzBordered
        [nzData]="dataList"
        [nzFrontPagination]="false"
        [nzShowPagination]="true"
        [nzPageIndex]="pageInfo.first"
        [nzTotal]="pageInfo.totalRecords"
        [nzShowTotal]="totalTemplate"
        [nzPageSize]="pageInfo.rows"
        [nzLoadingDelay]="1"
        [nzPageSizeOptions]="[10,20,30,50,100]"
        [nzShowQuickJumper]="true"
        [nzShowSizeChanger]="true"
        (nzPageIndexChange)="changePageIndex($event)"
        (nzPageSizeChange)="changePageSize($event)"
        [nzWidthConfig]="nzWidthConfigs"
        [nzScroll]="{x: '1940px'}"
      >
        <thead>
        <tr>
          <th>序号</th>
          <th>督导类型</th>
          <th>学年</th>
          <th>学期</th>
          <th>课程编号</th>
          <th>课程名称</th>
          <th>课时</th>
          <th>课程类型</th>
          <th>开课部门</th>
          <th>任课教师</th>
          <th>工号</th>
          <th>职称</th>
<!--          <th>授课系部</th>-->
<!--          <th>授课专业</th>-->
<!--          <th>授课班级</th>-->
          <th>上课地点</th>
          <th>评价时间</th>
          <th>评价次数</th>
          <th nzRight="0px">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let item of dataList; let i = index">
          <td>{{i + 1}}</td>
          <td>{{ item.superviseType}}</td>
          <td>{{ item.schoolYear}}</td>
          <td>{{ item.semesterName}}</td>
          <td>{{ item.number}}</td>
          <td>{{ item.name}}</td>
          <td>{{ item.sectionCount}}</td>
          <td>{{ item.type}}</td>
          <td>{{ item.startDeptName}}</td>
          <td>{{ item.teacherName}}</td>
          <td>{{ item.teacherNumber}}</td>
          <td>{{ item.teacherTitle}}</td>
<!--          <td>{{ item.teachDeptName}}</td>-->
<!--          <td>{{ item.majorName}}</td>-->
<!--          <td>{{ item.classesName}}</td>-->
          <td>{{ item.address}}</td>
          <td>{{item.superviseDateStr}}</td>
          <td>{{item.count}}</td>
          <td nzRight="0px">
            <span class="operaFont firOpera" (click)="clickEvaluated(item)">评价</span>
          </td>
        </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
  <div class="info-box w100 h100" *ngIf="view">
    <div class="title flex flex-space-between flex-justify-start">
      评价
      <div class="back-info operaFont" (click)="view = false">
        返回上一级<i class="fa fa-reply m-l-sm"></i>
      </div>
    </div>
    <div class="evaluate-table">
      <div class="table-head">教学系部评价记录表(专业课)</div>
      <div class="table-time flex flex-space-between flex-align-center">
        <div class="time">
          日期：
          <nz-date-picker [(ngModel)]="evaluateTableObj.evaluteDate">
          </nz-date-picker>
        </div>
        <div class="section flex flex-justify-start flex-align-center">
          节次：
          <div class="section-box">
            第<nz-input-number nzPlaceHolder="请输入" [(ngModel)]="evaluateTableObj.startSection" [nzMin]="1" [nzStep]="1"></nz-input-number>节至
            第<nz-input-number nzPlaceHolder="请输入" [(ngModel)]="evaluateTableObj.endSection" [nzMin]="evaluateTableObj.startSection" [nzStep]="1"></nz-input-number>节
          </div>
        </div>
      </div>
      <table class="table table-bordered">
        <tbody>
          <tr>
            <td class="th-t">课程名称</td>
            <td class="disabled">{{evaluateObj.courseName}}</td>
            <td class="th-t">任课教师</td>
            <td class="disabled">{{evaluateObj.teacherName}}</td>
            <td class="th-t">职称</td>
            <td class="disabled">{{evaluateObj.teacherTitle}}</td>
          </tr>
          <tr>
            <td class="th-t">系部</td>
            <td class="disabled">{{evaluateObj.teachDeptName}}</td>
            <td class="th-t">班级</td>
            <td class="disabled" [title]="evaluateObj.classesName">
              <div class="text-overflow" style="width: 200px;">{{evaluateObj.classesName}}</div>
            </td>
            <td class="th-t">专业</td>
            <td class="disabled">{{evaluateObj.majorName}}</td>
          </tr>
          <tr>
            <td class="th-t">上课地点</td>
            <td class="disabled">{{evaluateObj.address}}</td>
            <td class="th-t">应到</td>
            <td>
              <nz-input-number class="w100" nzPlaceHolder="请输入" [nzMin]="1" [(ngModel)]="evaluateTableObj.shouldCount"></nz-input-number>
            </td>
            <td class="th-t">实到</td>
            <td>
              <nz-input-number class="w100" nzPlaceHolder="请输入" [nzMin]="1" [nzMax]="evaluateTableObj.shouldCount" [(ngModel)]="evaluateTableObj.realCount"></nz-input-number>
            </td>
          </tr>
          <tr>
            <td class="th-t">迟到</td>
            <td>
              <nz-input-number class="w100" nzPlaceHolder="请输入" [nzMin]="0" [nzMax]="evaluateTableObj.shouldCount" [(ngModel)]="evaluateTableObj.lateCount"></nz-input-number>
            </td>
            <td class="th-t">缺课</td>
            <td>
              <nz-input-number class="w100" nzPlaceHolder="请输入" [nzMin]="0" [(ngModel)]="evaluateTableObj.missCount"></nz-input-number>
            </td>
            <td class="th-t">出勤率</td>
            <td class="disabled">
              {{evaluateTableObj.realCount && evaluateTableObj.shouldCount && (evaluateTableObj.realCount / evaluateTableObj.shouldCount * 100).toFixed(2) + '%'}}
            </td>
          </tr>
          <tr>
            <td class="th-t">评课人员</td>
            <td colspan="5">
              <div class="assessment-list">
                <nz-checkbox-group [(ngModel)]="assessmentPersonArr" (ngModelChange)="changeAssessment($event)"></nz-checkbox-group>
              </div>
            </td>
          </tr>
          <tr>
            <td class="th-t">主要教学内容</td>
            <td colspan="5">
              <textarea rows="4" nz-input [(ngModel)]="evaluateTableObj.content"></textarea>
            </td>
          </tr>
          <tr>
            <td class="th-t">评价项目</td>
            <td colspan="3" class="th-t">评价要点</td>
            <td class="th-t">评价记录</td>
            <td class="th-t">量化评分</td>
          </tr>
          <tr *ngFor="let item of evaluateProjectList; let i = index;">
            <td class="th-t" [rowSpan]="rowSpanIndexArr[i] > 0 ? rowSpanIndexArr[i] : 1"
                *ngIf="tdHiddenIndexArr.includes(i)">
              {{item.examClassifyName}}({{item.examClassifyScore}})
            </td>
            <td [colSpan]="item.hasItem ? 3 : 4" [ngClass]="item.hasItem ? 'td-text-left' : 'td-text-left-blank'">
              <span *ngIf="item.hasItem">{{item.rowInfo.examItemName}}</span>
              <textarea *ngIf="!item.hasItem" rows="4" nz-input [(ngModel)]="item.rowInfo.content" placeholder="请输入"></textarea>
            </td>
            <td *ngIf="item.hasItem" class="flex flex-justify-start flex-align-center">
<!--              多选框-->
              <nz-select
                        *ngIf="item.rowInfo.type === '多选框'"
                        [(ngModel)]="item.rowInfo.value"
                         nzAllowClear
                         nzMode="multiple"
                         class="w100"
                         nzPlaceHolder="请选择"
              >
                <nz-option *ngFor="let ele of (item.rowInfo.selectStr || '').split('/')"
                           [nzLabel]="ele"
                           [nzValue]="ele"
                           [title]="ele"
                ></nz-option>
              </nz-select>
<!--              单选框-->
              <nz-select
                         *ngIf="item.rowInfo.type === '单选框'"
                         [(ngModel)]="item.rowInfo.value"
                         nzAllowClear
                         nzMode="default"
                         [ngClass]="item.rowInfo.value !== '其他' ? 'w100' : 'w50'" nzPlaceHolder="请选择">
                <nz-option *ngFor="let ele of (item.rowInfo.selectStr || '').split('/')"
                           [nzLabel]="ele"
                           [nzValue]="ele"
                           [title]="ele"
                ></nz-option>
              </nz-select>
              <input type="text" nz-input *ngIf="item.rowInfo.type === '单选框' && item.rowInfo.value === '其他'" [(ngModel)]="item.rowInfo.content"  placeholder="请输入">
              <input type="text" nz-input *ngIf="item.rowInfo.type === '多选框' && (item.rowInfo.value || []).includes('其他')" [(ngModel)]="item.rowInfo.content" placeholder="请输入">
<!--              文本框-->
              <input type="text" nz-input *ngIf="item.rowInfo.type === '文本框'" [(ngModel)]="item.rowInfo.value" placeholder="请输入">
            </td>
            <td [rowSpan]="rowSpanIndexArr[i] > 0 ? rowSpanIndexArr[i] : 1"
                *ngIf="tdHiddenIndexArr.includes(i)">
              <nz-input-number (ngModelChange)="changeEvaluateScore($event, i)" [(ngModel)]="item.getScore" nzPlaceHolder="请输入" [nzMin]="1" [nzMax]="item.examClassifyScore"></nz-input-number>
            </td>
          </tr>
          <tr>
            <td class="th-t">总分</td>
            <td colspan="5" class="disabled">
              {{totalScore}}
            </td>
          </tr>
          <tr *ngFor="let item of evaluateProjectNoScoreList;">
            <td class="th-t">{{item.examClassifyName}}</td>
            <td colspan="5">
              <textarea rows="4" nz-input [(ngModel)]="item.rowInfo.content" placeholder="请输入"></textarea>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="enclosure-box">
          附件：
        <nz-upload [nzAction]="uploadUrl"
                         [nzHeaders]="headerInfo"
                         [nzData]="{'moduleName': 'evaluate'}"
                         [(nzFileList)]="fileList"
                         [nzRemove]="deleteFlile"
                         (nzChange)="handleChange($event)"
                         [nzAccept]="'.xlsx,.xls,.doc,.docx,.pdf,.png,.jpeg,.jpg'"
        >
          <button nz-button>
            <i nz-icon type="upload"></i><span>点击上传</span>
          </button>
        </nz-upload>
        <div class="btn-box">
          <button nz-button nzType="default" (click)="view = false;">取消</button>
          <button nz-button nzType="primary" (click)="clickConfirm()">确定</button>
        </div>
      </div>
    </div>
  </div>
</div>
